import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { View, Image, Text, Input, Button } from '@tarojs/components';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { sourceUrl } from '@/config';
import './index.scss';

const InvoiceStatusList = ['', '待审核', '审核通过', '审核拒绝', '开票中', '开票成功', '开票失败'];

const InvoiceDetails = ({ dispatch, seletEinvoiceDetail }) => {
  // const [atSwitchVal,setAtSwitchVal] = useState(false)
  const [layoutFlag, setLayoutFlag] = useState(false);
  const [btnFlag, setBtnFlag] = useState(false);
  const [mailVal, setMailVal] = useState();
  const [invoiceId, setInvoiceId] = useState();
  useEffect(() => {
    const parmas = getCurrentInstance().router.params;
    dispatch({
      type: 'invoiceAssistant/seletEinvoiceDetailModel',
      payload: { id: parmas.id },
    });
    if (parmas) {
      setInvoiceId(parmas.id);
    }
  }, []);
  const cancel = () => {
    setLayoutFlag(false);
  };
  const onPutchangeVal = (e) => {
    const reg = new RegExp(
      '^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$',
    ); //正则表达式
    const mailValE = e.target.value;
    setMailVal(e.target.value);
    if (reg.test(mailValE)) {
      setBtnFlag(true);
    } else {
      setBtnFlag(false);
    }
  };
  const sendEmail = () => {
    if (btnFlag && invoiceId) {
      dispatch({
        type: 'invoiceAssistant/invoiceSendEmailModel',
        payload: { email: mailVal, id: invoiceId },
      }).then(() => {
        Taro.showToast({
          title: '邮箱发送成功',
          icon: 'success',
        });
        setTimeout(function () {
          setLayoutFlag(false);
        }, 1000);
      });
    }
  };
  const seeDetails = () => {
    if (seletEinvoiceDetail?.email) {
      dispatch({
        type: 'invoiceAssistant/invoiceSendEmailModel',
        payload: { email: seletEinvoiceDetail.email, id: invoiceId },
      }).then(() => {
        Taro.showToast({
          title: '邮件发送成功',
          icon: 'success',
        });
      });
    } else {
      setLayoutFlag(true);
    }
  };

  const seeInvoice = () => {
    Taro.navigateTo({
      url: '/orderSubPack/invoiceManagement/preview/index',
    });
  };
  const imgList = () => {
    const children = [];
    if (!seletEinvoiceDetail) {
      return null;
    }
    const arr = seletEinvoiceDetail.orderInfo.mediaUrlList;
    arr.map((item, index) => {
      let umgUrl = item.indexOf('http') === 0 ? item : sourceUrl + item;
      children.push(<Image src={umgUrl} className="zebra-line" ke={index} />);
    });
    return children;
  };

  return (
    <View className="invoiceDetails">
      <View className="flex-column--center black085 topInfo">
        <View className="txt32 bold">
          {InvoiceStatusList[seletEinvoiceDetail?.invoiceStatus || 0]}
        </View>
        <View>
          <Text className="txt26">
            {seletEinvoiceDetail?.invoiceStatus == 5 ? '已开发票金额：' : '待开发票金额：'}
          </Text>
          <Text className="txt30">￥{seletEinvoiceDetail?.amount || 0}</Text>
        </View>
      </View>

      <View className="box mt30 invoiceMain">
        <View className="flex-row-center txt30 bold black085 title">
          {seletEinvoiceDetail?.invoiceTypeName || ''}
        </View>
        <View className="tab">
          <View className="top">
            <View
              className={
                seletEinvoiceDetail?.invoiceStatus >= 1
                  ? 'ring active customePageBackgroundStyle'
                  : 'ring'
              }
            >
              1
            </View>
            <View className="line"></View>
            <View
              className={
                seletEinvoiceDetail?.invoiceStatus >= 2 && seletEinvoiceDetail?.invoiceStatus != 3
                  ? 'ring active customePageBackgroundStyle'
                  : 'ring'
              }
            >
              2
            </View>
            <View className="line"></View>
            <View
              className={
                seletEinvoiceDetail?.invoiceStatus >= 5
                  ? 'ring active customePageBackgroundStyle'
                  : 'ring'
              }
            >
              3
            </View>
          </View>
          <View className="botto">
            <Text className="text">申请提交</Text>
            <Text className="text cen">财务处理</Text>
            <Text className="text">开票完成</Text>
          </View>
        </View>
        <View className="flex-row-spacebetween contain">
          <View className="le">
            <View className="item">
              <Text className="text">发票类型</Text>
              <Text className="text cen">{seletEinvoiceDetail?.invoiceTypeName || ''}</Text>
            </View>
            {seletEinvoiceDetail?.invoiceContent && (
              <View className="item">
                <Text className="text">发票内容</Text>
                <Text className="text cen">{seletEinvoiceDetail?.invoiceContent || ''}</Text>
              </View>
            )}
            <View className="item">
              <Text className="text">抬头类型</Text>
              <Text className="text cen">{seletEinvoiceDetail?.titleTypeName || ''}</Text>
            </View>
            <View className="item">
              <Text className="text">抬头名称</Text>
              <Text className="text cen">{seletEinvoiceDetail?.title || ''}</Text>
            </View>
            <View className="item">
              <Text className="text">开票金额</Text>
              <Text className="text cen">{seletEinvoiceDetail?.amount || ''}</Text>
            </View>
            <View className="item">
              <Text className="text">开票时间</Text>
              <Text className="text cen">{seletEinvoiceDetail?.invoiceTime || ''}</Text>
            </View>
            <View className="item last">
              <Text className="text">申请时间</Text>
              <Text className="text cen">{seletEinvoiceDetail?.created || ''}</Text>
            </View>
          </View>
          {/* {seletEinvoiceDetail?.urlList?.length > 0 && (
            <View className="ri" onClick={seeInvoice}>
              <Image src={seletEinvoiceDetail.urlList[0]} className="zebra-line" />
            </View>
          )} */}
        </View>
      </View>

      <View className="box contentPerson">
        <View className="tit">{seletEinvoiceDetail?.orderInfo.merchantList[0].merchantName}</View>
        <View className="line">{imgList()}</View>
        <View className="price">
          <Text className="text-up">￥{seletEinvoiceDetail?.amount}</Text>
          <Text className="text">
            共{seletEinvoiceDetail?.orderInfo?.totalQuantity}件
          </Text>
        </View>
        <View className="boto">
          <View className="item">
            <Text className="text">订单状态</Text>
            <Text className="text cen">{seletEinvoiceDetail?.orderInfo?.statusDesc}</Text>
          </View>
          <View className="item">
            <Text className="text">订单编号</Text>
            <Text className="text cen">{seletEinvoiceDetail?.orderInfo?.orderNumber}</Text>
          </View>
          <View className="item">
            <Text className="text">下单时间</Text>
            <Text className="text cen">{seletEinvoiceDetail?.orderInfo?.created}</Text>
          </View>
        </View>
      </View>

      {/*<View className="swich">
          <View className="tit">授权太湖商城将电子普通发票加入微信卡包</View>
          <View className="btn">
            <AtSwitch checked={atSwitchVal} onChange={handleChange} />
          </View>
        </View>*/}
      {seletEinvoiceDetail?.invoiceStatus == 5 && <View className="flex-row-end-center bottomOp">
        <View className="flex-row-center-center email" onClick={seeDetails}>
          发送邮箱
        </View>
      </View>}
      

      {layoutFlag && (
        <View className="atFloatLayout">
          <View className="layoutBox">
            <Text className="text">请确认邮箱地址</Text>
            <View className="footer">
              <Input
                className="input"
                placeholder="用于接收电子发票邮件"
                placeholderStyle="color:#999"
                value={mailVal}
                onInput={onPutchangeVal}
              />
            </View>
            <View className="footerBtn">
              <Button className="btn left" onClick={cancel}>
                取消
              </Button>
              <Button className={btnFlag ? 'btn active' : 'btn'} onClick={sendEmail}>
                发送
              </Button>
            </View>
          </View>
        </View>
      )}
    </View>
  );
};
export default connect(({ invoiceAssistant }) => ({
  seletEinvoiceDetail: invoiceAssistant.seletEinvoiceDetail,
}))(InvoiceDetails);
